<template>
  <div class="mainWrap">
    <div class="top">
      <headerWrap></headerWrap>
      <navWrap></navWrap>
    </div>
    <!-- 筛选按钮 -->
    <div class="filterWrap">
      <ul>
        <li>爱情</li>
        <li>喜剧</li>
        <li>动作</li>
        <li>古装</li>
        <li @click="showPopupFn">筛选</li>
      </ul>
    </div>
    <van-popup
      v-model="show"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <filterWrap></filterWrap>
    </van-popup>
    <div v-for="n in newData" class="videoWrap">
      <span>{{ n.title }}</span>
      <img :src="n.pic" alt="" />
    </div>
    <footerWrap></footerWrap>
  </div>
</template>

<script>
import axios from "axios";
import headerWrap from "./headerWrap.vue";
import navWrap from "./navWrap.vue";
import footerWrap from "./footerWrap.vue";
import filterWrap from "./filterWrap.vue";
export default {
  name: "cinemaWrap",
  components: { headerWrap, navWrap, footerWrap, filterWrap },
  data() {
    return {
      newData: {},
      show: false,
    };
  },
  created() {
    axios.get("/index/ding.json").then((_d) => {
      // console.log(_d.data);
      this.newData = _d.data.bangumi;
    });
  },
  methods: {
    showPopupFn() {
      this.show = true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mainWrap {
  position: relative;
  padding-top: 198px;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
/*-------*/
.videoWrap {
  clear: both;
}
.videoWrap span {
  font-size: 0.3rem;
}
.videoWrap img {
  display: block;
  width: 95%;
  margin: 0 auto;
}

/* filterWrap */
.filterWrap {
  font-size: 0.4rem;
}
.filterWrap li {
  float: left;
  background: #eee;
  margin-right: 0.2rem;
  padding: 10px;
  border-radius: 20px;
}
</style>
